<template>
    <div class="white-box">
        <title-more title="授权管理" />
        <cell-tip bottom="60px">
            <template #tip>
                <p class="tip-text">未注册小程序请前往<span class="step-text__click" @click="toOuter">微信官方网站</span>注册并完善认证小程序</p>
            </template>
        </cell-tip>
        <div class="am-box flexs">
            <div class="am-item">
                <el-image class="am-item-img" fit="cover" :src="a1" alt="图标"></el-image>
                <h3>用户端小程序</h3>
                <p class="am-item__sub">绑定小程序，体验完整版功能</p>
                <p class="al-item__text">
                    将微信小程序与店铺绑定，深度开展品牌宣传和商品交易，连接微信生态公域与私域。为保证所有功能的正常使用，授权时请把所有权限统一授权给花数云
                </p>
                <div class="am-foot flexs">
                    <el-button type="primary" @click="user_auth_applet == 0 ? clickAuth(0) : clickView(0)">
                        {{ user_auth_applet == 0 ? "授权绑定小程序" : "查看小程序" }}
                    </el-button>
                </div>
            </div>
            <div class="am-item" v-if="versions && versions.version_id == 4">
                <el-image class="am-item-img" fit="cover" :src="a1" alt="图标"></el-image>
                <h3>员工端小程序</h3>
                <p class="am-item__sub">绑定小程序，体验完整版功能</p>
                <p class="al-item__text">
                    将微信小程序与店铺绑定，深度开展品牌宣传和商品交易，连接微信生态公域与私域。为保证所有功能的正常使用，授权时请把所有权限统一授权给花数云
                </p>
                <div class="am-foot flexs">
                    <el-button type="primary" @click="staff_auth_applet == 0 ? clickAuth(1) : clickView(1)">
                        {{ staff_auth_applet == 0 ? "授权绑定小程序" : "查看小程序" }}
                    </el-button>
                </div>
            </div>
            <div class="am-item">
                <el-image class="am-item-img" fit="cover" :src="a1" alt="图标"></el-image>
                <h3>供应商端小程序</h3>
                <p class="am-item__sub">绑定小程序，体验完整版功能</p>
                <p class="al-item__text">
                    将微信小程序与店铺绑定，深度开展品牌宣传和商品交易，连接微信生态公域与私域。为保证所有功能的正常使用，授权时请把所有权限统一授权给花数云
                </p>
                <div class="am-foot flexs">
                    <el-button type="primary" @click="supplier_auth_applet == 0 ? clickAuth(2) : clickView(2)">
                        {{ supplier_auth_applet == 0 ? "授权绑定小程序" : "查看小程序" }}
                    </el-button>
                </div>
            </div>
        </div>

        <!-- <title-more title="优秀案例" />
        <div class="applet-case">
            <div class="applet-list">
                <div class="applet-item" v-for="item in cases" :key="item.text">
                    <el-image class="applet-img" :src="item.img" fit="cover" />
                    <p class="applet-title line-one">{{ item.title }}</p>
                </div>
            </div>
        </div> -->
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, computed, onMounted, onActivated } from "vue"
import { useRouter, onBeforeRouteLeave } from "vue-router"
import { useBaseStore } from "@store/base"
import TitleMore from "@components/title-more.vue"
import CellTip from "@components/cell-tip.vue"
import a1 from "@images/a1.png"

const router = useRouter()
const { proxy } = getCurrentInstance()

const storeBase = useBaseStore()
const versions = computed(() => {
    return storeBase.versions
})
const user_auth_applet = computed({
    get() {
        return storeBase.user_auth_applet // 用户端小程序是否已经授权，0否，1是
    },
    set(newValue) {
        storeBase.setUserAuth(newValue)
    },
})
const staff_auth_applet = computed({
    get() {
        return storeBase.staff_auth_applet // 员工端小程序是否已经授权，0否，1是
    },
    set(newValue) {
        storeBase.setStaffAuth(newValue)
    },
})
const supplier_auth_applet = computed({
    get() {
        return storeBase.supplier_auth_applet // 供应商端小程序是否已经授权，0否，1是
    },
    set(newValue) {
        storeBase.setSupplierAuth(newValue)
    },
})

// 离开-可以利用这个触发删除页面缓存操作
onBeforeRouteLeave((to, from, next) => {
    if (from.name === "AppletManage") {
        storeBase.setInclude("AppletManage")
    }
    next()
})

onActivated(() => {
    getAuthInfo()
})

onMounted(() => {
    getAuthInfo()
})

// 获取小程序授权信息
const client_os = ["client_mini_program", "staff_mini_program", "supplier_mini_program"]
function getAuthInfo() {
    getPublickAuth(0) // 用户端
    versions.value && versions.value.version_id == 4 && getPublickAuth(1) // 员工端
    getPublickAuth(2) // 供应商端
}
function getPublickAuth(type) {
    proxy.$axios
        .get("mp/authInfo", {
            params: {
                client_os: client_os[type],
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                if (type == 0) {
                    user_auth_applet.value = result && result.auth_status == 1 ? 1 : 0
                } else if (type == 1) {
                    staff_auth_applet.value = result && result.auth_status == 1 ? 1 : 0
                } else {
                    supplier_auth_applet.value = result && result.auth_status == 1 ? 1 : 0
                }
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

/**
 * 授权步骤
 * @param {Function} clickAuth 前往授权
 * @param {Number} type 0是用户端，1是员工端，2是供应商端
 * @param {Function} clickUploadCode 上传代码
 * @param {Function} clickExamine 提交审核
 * @param {Function} clickRelease 发布
 */
const clickAuth = (type) => {
    localStorage.setItem("SQ_TYPE", type)
    proxy.$axios
        .get("mp/auth")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                let redirect_url = encodeURIComponent(`${proxy.$urls}/saas/#/Setup/AppletBaseInfo`)
                window.location.href = `https://mp.weixin.qq.com/cgi-bin/componentloginpage?component_appid=${result.component_appid}&pre_auth_code=${result.pre_auth_code}&redirect_uri=${redirect_url}&auth_type=2`
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 查看详情
const clickView = (type) => {
    let arrs = ["/Setup/AppletManageUser", "/Setup/AppletManageStaff", "/Setup/AppletManageSupp"]
    router.push(arrs[type])
}

/**
 * 优秀案例
 * @param {Array} cases  案例
 */
const cases = ref([
    {
        img: "https://cdn.huashushop.com/tenant_ad0234829205b9033196ba818f7a872b/album/202208/20220812_cc703a96e7c4c7ac478cb8050b2f5aa6.png!img_400",
        title: "幸福西饼",
    },
])
function getCase() {
    proxy.$axios
        .get("")
        .then((res) => {
            if (res.data.code == 0) {
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

const toOuter = () => {
    window.open("https://mp.weixin.qq.com/")
}
</script>
<script>
export default {
    name: "AppletManage",
}
</script>

<style lang="less" scoped>
.am-box {
    margin: @margin-mdl 0px 60px;
    justify-content: center;
    .am-item {
        border-radius: @radius-lg;
        box-shadow: 2px 2px 10px #dbdada;
        padding: @padding-lg;
        text-align: center;
        width: 400px;
        & + div {
            margin-left: 40px;
        }
        .am-item-img {
            width: 100px;
            margin-bottom: @margin-sm;
        }
        h3 {
            font-size: @font-size-lg;
            font-weight: bold;
        }
        .am-item__sub {
            font-size: @font-size-md;
            color: @gray-6;
            margin: @margin-xs 0px @margin-mdl;
        }
        .al-item__text {
            font-size: @font-size-md;
            color: @gray-6;
        }
        .am-foot {
            margin: @margin-lg 0px @margin-base;
            justify-content: center;
        }
    }
}
.applet-list {
    display: flex;
    .applet-item {
        width: 120px;
        margin-right: 50px;
    }
    .applet-img {
        width: 120px;
        height: 120px;
        overflow: hidden;
        margin-bottom: @margin-sm;
    }
    .applet-title {
        font-size: @font-size-md;
        color: @gray-8;
        text-align: center;
    }
}

.step-text__click {
    color: @themes;
    cursor: pointer;
    padding: 0px 2px;
}
</style>
